<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>小马技术 | Chart.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/myweb/style/main.css" />
    <script src="/myweb/chartjs/Chart.bundle.js"></script>
</head>

<body>
    <canvas id="myChart">
        图表区
    </canvas>

    <script>
        (function () {
            'use strict';

            var type = 'radar';
            var data = {
                labels: ['伤害', '辅助', '存活', '上手', '价格'],
                datasets: [
                    {
                        label: '泽拉图',
                        data: [70, 60, 50, 50, 70],
                        backgroundColor: 'rgba(0, 255, 128, 0.5)',
                    },
                    {
                        label: '雷诺',
                        data: [90, 10, 40, 70, 20],
                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
                    }
                ]
            };

            var options = {
                scale: {
                    ticks: {
                        suggestedMin: 0,
                        suggestedMax: 100,
                        stepSize: 20,
                    }
                },
                title: {
                    display: true,
                    text: '风暴英雄',
                    fontColor: 'indigo',
                    fontSize: '24'
                }
            };
            
            var ctx = document.getElementById('myChart').getContext('2d');
            var chart = new Chart(ctx, {
                type: type,
                data: data,
                options: options
            });
        })();
    </script>
</body>

</html>